<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生物树2</title>
    <script type="text/javascript" src="js/svg.min.js"></script>
    <script type="text/javascript" src="js/svg.draggable.min.js"></script>
    <style type="text/css">
        html,body{height:100%}
        #drawing {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="drawing" ></div>
<script type="text/javascript">
    var e, t, s
        , draw = SVG('drawing').attr({ 'font-size': 10 }).fill('#f57518')

    /* plain draggable */
    var rec1=draw.rect(100,100).center(150, 150).id('01').draggable()
    draw.plain('just plain draggable').center(150, 210)

    /* grouped draggable */
    var rec2=draw.group().rect(100,100).center(400, 150).fill("#ff00ff").draggable();

    draw.plain('grouped draggable').center(400, 210)
    var line = draw.line(150, 150, 400, 150).stroke({ width: 1 })
    rec1.dragmove=function () {
        line.plot(rec1.cx(), rec1.cy(), rec2.cx(), rec2.cy());
    }
    rec2.dragmove=function () {
        line.plot(rec1.cx(), rec1.cy(), rec2.cx(), rec2.cy());
    }
    /* constraind with object */
    e = draw.rect(100,100).center(650, 150).draggable({ minX: 400, minY: 50, maxX: 800, maxY: 400 })
    e.dragstart = function() {
        s = e.clone().opacity(0.2)
        t = draw.rect(400, 350).move(400, 50).fill('none').stroke('#0fa')
    }
    e.dragmove = function() {
        s.animate(200, '>').move(e.x(), e.y())
    }
    e.dragend = function() {
        t.remove()
        s.remove()
    }
    draw.plain('constrained with object and ghost').center(650, 210)

    /* constraind with function */
    draw.rect(100,100).center(900, 150).draggable(function(x, y) { return { x: x < 1000, y: y < 300 } })
    draw.plain('constraint with function').center(900, 210)

    /* draggable pattern */
</script>
</body>
</html>